<!--
 * @Author: xuzehan 935351619@qq.com
 * @Date: 2023-08-24 16:00:24
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2023-11-14 14:26:34
 * @FilePath: \nms-vue\src\views\nmcFlowDefine\modules\configModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal
      title="配置"
      width="50%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model layout="inline" :model="formInline">
        <a-form-model-item label="当前节点">
          <a-input v-model="formInline.flowName" read-only />
        </a-form-model-item>
        <a-form-model-item label="目标发包节点">
          <a-select
            @change="changeSendNode"
            v-model="formInline.target_id"
            placeholder="请选择目标节点"
            style="width: 200px"
          >
            <a-select-option :value="item.id" v-for="item in sendPacketsList" :key="item.id">{{
              item.flowName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <a-button type="primary" style="margin-bottom: 10px" @click="handleAdd">添加</a-button>
      <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false">
        <template slot="sourceGridId" slot-scope="text, record">
          <a-select v-model="record.sourceGridId" placeholder="请选择源节点" style="width: 200px">
            <a-select-option :value="item.id" v-for="item in sourceGridList" :key="item.id">{{
              item.gridName
            }}</a-select-option>
          </a-select>
        </template>
        <template slot="targetGridId" slot-scope="text, record">
          <a-select v-model="record.targetGridId" placeholder="请选择目标节点" style="width: 200px">
            <a-select-option :value="item.id" v-for="item in gridList" :key="item.id">{{
              item.gridName
            }}</a-select-option>
          </a-select>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm overlayClassName="poperLayTable"  v-if="dataSource.length" title="确定删除?" @confirm="() => onDelete(record.key)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const EditableCell = {
  template: `
      <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
            type="check"
            class="editable-cell-icon-check"
            @click="check"
          />
        </div>
        <div v-else class="editable-cell-text-wrapper">
          {{ value || ' ' }}
          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
        </div>
      </div>
    `,
  props: {
    text: String,
  },
  data() {
    return {
      value: this.text,
      editable: false,
    }
  },
  methods: {
    handleChange(e) {
      const value = e.target.value
      this.value = value
    },
    check() {
      this.editable = false
      this.$emit('change', this.value)
    },
    edit() {
      this.editable = true
    },
  },
}
import { httpAction, getAction } from '@/api/manage'
import { flattenTree } from '@/utils/util.js'
export default {
  components: {
    EditableCell,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formInline: {
        source_id: '',
        flowName: '',
        target_id: '',
      },
      dataSource: [
        {
          key: '0',
          sourceGridId: undefined,
          targetGridId: undefined,
        },
      ],
      count: 1,
      gridList: [],
      sourceGridList: [],
      sendPacketsList: [
        { label: '1111', value: 'aaaa', id: 1 },
        { label: '2222', value: 'bbbb', id: 2 },
        { label: '3333', value: 'dddd', id: 3 },
        { label: '4444', value: 'eeee', id: 4 },
      ],

      columns: [
        {
          title: '当前工程量',
          dataIndex: 'sourceGridId',
          scopedSlots: { customRender: 'sourceGridId' },
        },

        {
          title: '目标工程量',
          dataIndex: 'targetGridId',
          scopedSlots: { customRender: 'targetGridId' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      url: {
        getTreeBranch: '/flow/nmcFlowDefine/getTreeBranch',
        queryAllPackageGridByPackageInfoId: '/grid/nmcPackageGrid/queryAllPackageGridByPackageInfoId',
        list: '/flow/nmcFlowGridTransform/list',
        addBatchTransform: '/flow/nmcFlowGridTransform/addBatchTransform',
      },
    }
  },
  methods: {
    changeSendNode(val, a) {
      let select = this.sendPacketsList.find((i) => i.id == val)
      //获取已配置的
      getAction(this.url.list, {
        sourceDefineId: this.formInline.recordId,
        targetDefineId: this.formInline.target_id,
      }).then((res) => {
        console.log(res, 'res')
        if (res.result && res.result.records.length > 0) {
          this.dataSource = []
          res.result.records.forEach((i, index) => {
            this.dataSource.push(Object.assign({ key: index }, i))
          })
          this.count = this.dataSource.length
        }
      })
      //获取工程量列表
      getAction(this.url.queryAllPackageGridByPackageInfoId, { packageInfoId: select.packageInfoId }).then((res) => {
        this.gridList = res.result
      })
      //获取工程量列表
      getAction(this.url.queryAllPackageGridByPackageInfoId, { packageInfoId: this.formInline.source_id }).then(
        (res) => {
          this.sourceGridList = res.result
        }
      )
    },
    //树形数据转平铺数据
    flattenTree(source) {
      let res = []
      source.forEach((el) => {
        if (el.action == 0) {
          res.push(el)
        }
        //不能放在上面的if中，否则会导致收包节点的子节点无法被遍历
        el.childList && res.push(...this.flattenTree(el.childList))
      })
      return res
    },
    getTreeBranchList(id) {
      getAction(this.url.getTreeBranch, { id, pageSize: -1 }).then((res) => {
        this.sendPacketsList = [...this.flattenTree(res.result.childList)]
      })
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find((item) => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    },
    onDelete(key) {
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter((item) => item.key !== key)
    },
    handleAdd() {
      const { count, dataSource } = this
      const newData = {
        key: count,
        sourceGridId: undefined,
        targetGridId: undefined,
      }
      this.dataSource = [...dataSource, newData]
      this.count = count + 1
    },
    handleSubmit(e) {
      console.log(this.formInline)
    },
    showModal(val) {
      this.formInline.flowName = val.flowName
      this.formInline.source_id = val.packageInfoId
      this.formInline.recordId = val.id
      this.visible = true
      this.getTreeBranchList(val.id)
    },

    handleOk(e) {
      this.confirmLoading = true
      console.log(this.dataSource)
      let params = {
        sourceDefineId: this.formInline.recordId,
        targetDefineId: this.formInline.target_id,
        nmcFlowGridTransformItemDtoList: [...this.dataSource],
      }
      httpAction(this.url.addBatchTransform, params, 'post').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    resetModal() {
      this.formInline = {
        source_id: '',
        flowName: '',
        target_id: '',
        recordId: '',
      }
      this.dataSource = [
        {
          key: '0',
          sourceGridId: undefined,
          targetGridId: undefined,
        },
      ]
      this.count = 1
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.resetModal()
    },
  },
}
</script>

<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
</style>
